<template>
    <div class="phone-container">
        <div class="phone-frame">
            <div class="volume-buttons">
                <div class="volume-up"></div>
                <div class="volume-down"></div>
            </div>
            <div class="power-button"></div>
            <div class="mute-switch"></div>
            <div class="phone-screen">
                <div class="order-record-container">
                    <!-- 顶部导航栏 -->
                    <van-nav-bar title="开单记录" left-arrow fixed placeholder class="custom-nav" />

                    <!-- 顶部tab切换 -->
                    <div class="tabs-bar">
                        <div v-for="tab in tabs" :key="tab.value"
                            :class="['tab-item', { active: activeTab === tab.value }]" @click="activeTab = tab.value">
                            {{ tab.label }}
                        </div>
                    </div>

                    <!-- 用户信息与切换 -->
                    <div class="user-bar">
                        <span>王小柯</span>
                        <span class="user-id">2015****10</span>
                        <van-icon name="user-o" size="18" style="margin-left:8px;" />
                        <span class="switch-btn">切换</span>
                    </div>

                    <!-- 订单列表 -->
                    <div class="order-list">
                        <div v-for="order in filteredOrders" :key="order.id"
                            :class="['order-card', { 'paid-card': order.status === 'paid' }]">
                            <div class="order-title">
                                <span v-if="order.status === 'paid'" class="paid-bar"></span>
                                <span class="order-title-text">{{ order.title }}</span>
                                <span :class="['order-status', order.statusClass]">{{ order.statusText }}</span>
                            </div>
                            <div class="order-info-row">
                                <span>申请医院</span>
                                <span>{{ order.hospital }}</span>
                            </div>
                            <div class="order-info-row">
                                <span>申请时间</span>
                                <span>{{ order.time }}</span>
                            </div>
                            <div class="order-info-row">
                                <span>开单金额</span>
                                <span>￥{{ order.amount }}</span>
                            </div>
                            <div v-if="order.status === 'rejected'" class="reject-reason-box">
                                <div class="reject-title">驳回原因</div>
                                <div class="reject-reason">{{ order.rejectReason }}</div>
                            </div>
                            <div class="order-actions" :class="{ 'paid-actions': order.status === 'paid' }">
                                <van-button v-if="order.status === 'pending'" size="small" round plain
                                    type="default">取消申请</van-button>
                                <van-button v-if="order.status === 'approved'" size="small" round type="primary"
                                    @click="goPay(order)">去支付</van-button>
                                <van-button v-if="order.status === 'rejected'" size="small" round plain
                                    type="default">已驳回</van-button>
                                <van-button v-if="order.status === 'paid'" size="small" round type="primary"
                                    @click="goDetail(order)">查看详情</van-button>
                                <van-button v-if="order.status === 'cancelled'" size="small" round plain
                                    type="default">已取消</van-button>
                            </div>
                        </div>
                    </div>

                    <div class="load-tip">已全部加载</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const tabs = [
    { label: '全部', value: 'all' },
    { label: '待审核', value: 'pending' },
    { label: '已审核', value: 'approved' },
    { label: '已取消', value: 'cancelled' }
]
const activeTab = ref('all')
const orders = ref([
    {
        id: 1,
        title: '动态心电图、血常规、新冠预防中药... ',
        hospital: '四川省保健院北苑',
        time: '2020-01-01 10:30:20',
        amount: 201.00,
        status: 'pending',
        statusText: '待审核',
        statusClass: 'status-pending'
    },
    {
        id: 2,
        title: '动态心电图、血常规、新冠预防中药... ',
        hospital: '四川省保健院北苑',
        time: '2020-01-01 10:30:20',
        amount: 201.00,
        status: 'approved',
        statusText: '审核通过',
        statusClass: 'status-approved'
    },
    {
        id: 3,
        title: '动态心电图、血常规、新冠预防中药... ',
        hospital: '四川省保健院北苑',
        time: '2020-01-01 10:30:20',
        amount: 201.00,
        status: 'rejected',
        statusText: '审核驳回',
        statusClass: 'status-rejected',
        rejectReason: '您所开的项目必须与您的历史诊断相符'
    },
    {
        id: 4,
        title: '动态心电图、血常规、新冠预防中药... ',
        hospital: '四川省保健院北苑',
        time: '2020-01-01 10:30:20',
        amount: 201.00,
        status: 'paid',
        statusText: '已支付',
        statusClass: 'status-paid'
    },
    {
        id: 5,
        title: '动态心电图、血常规、新冠预防中药... ',
        hospital: '四川省保健院北苑',
        time: '2020-01-01 10:30:20',
        amount: 201.00,
        status: 'cancelled',
        statusText: '已取消',
        statusClass: 'status-cancelled'
    }
])
const filteredOrders = computed(() => {
    if (activeTab.value === 'all') return orders.value
    if (activeTab.value === 'approved') return orders.value.filter(o => o.status === 'approved' || o.status === 'paid')
    return orders.value.filter(o => o.status === activeTab.value)
})

function goPay(order: any) {
    router.push('/order-pay')
}

function goDetail(order: any) {
    router.push('/order-detail')
}
</script>

<style scoped>
.phone-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.phone-frame {
    position: relative;
    width: 375px;
    height: 812px;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 8px;
    box-shadow: 0 0 0 2px #2a2a2a, 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #3a3a3a;
}

.volume-buttons {
    position: absolute;
    left: -2px;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.volume-up,
.volume-down {
    width: 4px;
    height: 30px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.power-button {
    position: absolute;
    right: -2px;
    top: 120px;
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mute-switch {
    position: absolute;
    left: -2px;
    top: 200px;
    width: 4px;
    height: 25px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.order-record-container {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 40px;
}

.custom-nav {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.tabs-bar {
    display: flex;
    background: #fff;
    border-radius: 12px 12px 0 0;
    margin: 16px 16px 0 16px;
    overflow: hidden;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 15px;
    color: #888;
    cursor: pointer;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.tab-item.active {
    color: #4285f4;
    border-bottom: 2px solid #4285f4;
    background: #f7faff;
}

.user-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
    margin: 0 16px 12px 16px;
    padding: 10px 12px;
    font-size: 15px;
    color: #333;
}

.user-id {
    color: #888;
    margin-left: 8px;
}

.switch-btn {
    color: #4285f4;
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
}

.order-list {
    padding: 0 16px;
}

.order-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.04);
}

.order-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.order-title-text {
    flex: 1;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-status {
    font-size: 13px;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-weight: 500;
}

.status-pending {
    background: #fffbe6;
    color: #f4b400;
    border: 1px solid #ffe58f;
}

.status-approved {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}

.status-rejected {
    background: #fdecea;
    color: #e74c3c;
    border: 1px solid #f5c6cb;
}

.status-paid {
    background: #e6fffb;
    color: #13c2c2;
    border: 1px solid #87e8de;
}

.status-cancelled {
    background: #f5f5f5;
    color: #888;
    border: 1px solid #eee;
}

.order-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
}

.reject-reason-box {
    background: #f7f7fa;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 10px 0;
}

.reject-title {
    color: #e74c3c;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.reject-reason {
    color: #e74c3c;
    font-size: 13px;
}

.order-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.load-tip {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    margin: 16px 0 0 0;
}

:deep(.van-button--primary) {
    background: linear-gradient(135deg, #4285f4 0%, #4ecdc4 100%);
    border: none;
}

.paid-card {
    position: relative;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.04);
    padding: 16px;
    margin-bottom: 16px;
}

.paid-bar {
    display: inline-block;
    width: 4px;
    height: 22px;
    background: #4285f4;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

.paid-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

@media (max-width: 420px) {
    .phone-frame {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        padding: 0;
    }

    .phone-screen {
        border-radius: 0;
    }

    .volume-buttons,
    .power-button,
    .mute-switch {
        display: none;
    }
}
</style>